<template>
    <div class="login-wrapper">
        <n-card title="Login" class="login-container">
            <n-form @submit.prevent="handleLogin" :model="form" :rules="rules" ref="loginFormRef">
                <n-form-item label="公司" path="tenantId" required>
                    <n-select v-model="form.tenantId" placeholder="请选择公司" :options="tenantOptions" />
                </n-form-item>
                <n-form-item label="用户名" path="username" required>
                    <n-input v-model="form.username" placeholder="请输入用户名" />
                </n-form-item>
                <n-form-item label="密码" path="password" required>
                    <n-input type="password" v-model="form.password" placeholder="请输入密码" />
                </n-form-item>
                <n-form-item>
                    <n-button class="login-button" attr-type="button" :loading="loading" @click="handleLogin">登录</n-button>
                </n-form-item>
            </n-form>
            <n-alert v-if="errorMessage" type="error" class="error">
                {{ errorMessage }}
            </n-alert>
        </n-card>
    </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref } from 'vue';
import { NCard, NForm, NFormItem, NInput, NButton, NAlert } from 'naive-ui';
import { getTenantList } from '@/http/api/login';

export default defineComponent({
    components: {
        NCard,
        NForm,
        NFormItem,
        NInput,
        NButton,
        NAlert
    },
    setup() {
        const loading = ref(false);
        const loginFormRef = ref(null);
        const form = ref({
            tenantId: '',
            username: '',
            password: ''
        });
        const errorMessage = ref('');
        const tenantList = ref([]);
        const tenantEnabled = ref(false);
        const tenantOptions = computed(() => {
            return tenantList.value.map(item => ({
                label: item.companyName,
                value: item.tenantId
            }));
        });

        const rules = {
            tenantId: { required: true, message: '请选择公司', trigger: 'blur' },
            username: { required: true, message: '请输入用户名', trigger: 'blur' },
            password: { required: true, message: '请输入密码', trigger: 'blur' }
        };

        onMounted(async () => {
            const data = await getTenantList();
            console.log('API Response:', data);
            tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
            if (tenantEnabled.value) {
                tenantList.value = data.voList;
                if (tenantList.value != null && tenantList.value.length !== 0) {
                    form.value.tenantId = tenantList.value[0].tenantId;
                }
                console.log('tenantList ----->', tenantList.value);
            }
        });

        const handleLogin = () => {
            loginFormRef.value.validate((valid) => {
                if (valid) {
                    // Handle login logic here
                    console.log('Form is valid');
                } else {
                    console.log('Form validation failed');
                }
            })
        };

        return {
            form,
            errorMessage,
            handleLogin,
            tenantOptions,
            rules,
            loading,
            loginFormRef
        };
    }
});
</script>

<style scoped>
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #27272e;
}

.login-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.error {
    margin-top: 10px;
}

.login-button {
    width: 100%;
}
</style>
